<template>
  <div class="authorityList">
      <!-- 面包屑 -->
     <el-breadcrumb separator-class="el-icon-arrow-right">
       <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
       <el-breadcrumb-item>权限管理</el-breadcrumb-item>
       <el-breadcrumb-item>权限列表</el-breadcrumb-item>
     </el-breadcrumb>
     <!-- 表格 -->
      <el-table
      :data="authorityList"
      style="width: 100%">
      <el-table-column label="#" type="index">
      </el-table-column>

      <el-table-column
        prop="authName"
        label="权限名称">
      </el-table-column>

      <el-table-column
        prop="path"
        label="路径">
      </el-table-column>

      <el-table-column
        prop="level"
        label="层次">
        <template v-slot:default='{row}'>
          <p v-if="row.level==='0'">一级</p>
          <p v-if="row.level==='1'">二级</p>
          <p v-if="row.level==='2'">三级</p>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      authorityList: []
    }
  },
  async created () {
    const { data, meta } = await this.$axios.get('rights/list')
    // console.log(data)
    if (meta.status === 200) {
      this.authorityList = data
    } else {
      console.log(meta.msg)
    }
  }
}
</script>

<style lang='scss' scoped>
 .authorityList{
    height: 100%;
    .el-breadcrumb{
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #cccccc;
      margin-bottom: 15px;
    }
  }
</style>
